<template>
    <el-menu :default-active="defaultKey" :unique-opened="true" :router="true" class="el-menu-vertical-demo" background-color='#001529' text-color="#fff" active-text-color="#fff">
        <template v-for="menu of collectList">
            <el-menu-item :key="menu.id" :index="menu.router" @click="setNavName(menu)" :route="{name:menu.router}">
                <div class="flex-centet-between">
                    <span>{{menu.name}}</span>
                    <i class="fs20 icon el-icon-star-on"  style="color:#ffd04b" @click.stop="collectionChoose(menu)"></i>
                </div>
            </el-menu-item>
        </template>

        <nav-item v-for="item of menuList" :item="item" :key="item.id">
        </nav-item>
    </el-menu>
</template>
<style scoped>
.el-menu li {
  list-style: none;
  /*border-top: 1px solid #324057;*/
}

.el-submenu .el-menu-item {
  border-top: 0px solid #ccc;
}

.el-menu-item {
  background-color: rgba(24, 144, 255, 0.2) !important;
}
.el-submenu .el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}
.flex-centet-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-centet-between .icon {
  vertical-align: middle;
  margin-right: 0px;
  width: 20px;
  font-size: 16px;
}

.is-active {
  background: #1890ff !important;
}
</style>
<script>
import navItem from "./Navitem.vue";
import { mapGetters } from "vuex";
import server from "@/service/index_c";
import { setCookie } from "@/base/utils";
export default {
  name: "menuItem",
  props: {
    menuList: {
      type: Array,
      default: []
    },
    collectList: {
      type: Array,
      default: []
    },
    isCollapse: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapGetters({
      getMenu: "getMenuItem"
    })
  },
  watch: {
    getMenu(val) {
      if ("id" in val) {
        this.collectList.push(val);
      }
    }
  },
  data() {
    return {
      quickMenu: [],
      defaultKey: ""
    };
  },
  mounted() {
    this.showMenuActive();
  },
  methods: {
    setNavName(item) {
      this.$store.dispatch("setNavName", item);
      setCookie("navName", item);
    },

    showMenuActive() {
      setTimeout(() => {
        this.defaultKey = this.$route.name;
      }, 500);
    },
    collectionChoose(item) {
      this.setServerCancelCollectMenu(item);
    },
    //取消收藏菜单
    async setServerCancelCollectMenu(item) {
      let result = await server.haiheiServerCancelCollectMenu({
        menuId: item.id
      });
      if (result.success) {
        for (let i = 0, len = this.collectList.length; i < len; i++) {
          if (this.collectList[i] === item) {
            this.collectList.splice(i, 1);
          }
        }
        this.findRemoveMenu(this.menuList, item.id);
       this.$store.dispatch("setMenuItem", {});
      } else {
      }
    },
    //递归查找mid相同的
    findRemoveMenu(arr, mid) {
      for (let item of arr) {
        //  console.log(item)
        if (item.childList != null && item.childList!==undefined && item.childList.length != 0) {
          this.findRemoveMenu(item.childList, mid);
        } else {
          if (item.id === mid) {
            item.isCollect = !item.isCollect;
          }
        }
      }
    }
  },
  components: {
    navItem
  }
};
</script>
